<template>
	<page-loading :show="resultData">
		<view class="wrap" v-if="resultData">
			<view class="mb140">
				<view class="headerBg">{{ returnPaystatus(resultData.status) }}</view>
				<view class="list mart40p">
					<view class="title">
						<view class="headImg"><image :src="resultData.headportrait" mode=""></image></view>
						<view class="shopName">
							{{ resultData.truename }}
							<i-icon icon="iconfanhui" type="single" class="mr-5 middle rotate180" size="28rpx" color="#666"></i-icon>
						</view>
					</view>
					<view class="listItem">
						<view class="left">
							<view class="carImg"><image :src="resultData.brand_img" mode="aspectFit"></image></view>
							车型 :
						</view>
						<view class="right">{{ resultData.car_type_name }}{{ resultData.configuration_name }}</view>
					</view>
					<view class="listItem">
						<view class="left">指导价：</view>
						<view class="right">{{ resultData.factory_money }}万元</view>
					</view>
					<view class="listItem">
						<view class="left">外观内饰：</view>
						<view class="right">
							<view class="flex-jc-sb width-80 color-333" v-if="resultData.colour">
								<view
									:style="{
										background: resultData.colour.outerColour.colorCoding
									}"
									class="iconcolor"
								></view>
								{{ resultData.colour.outerColour.color }} /{{ resultData.colour.inColour.color }}
								<view v-if="resultData.colour.inColour.neiColor.length == 1" :style="{ background: resultData.colour.inColour.colorCoding }" class="iconcolor"></view>
								<view v-else class="iconcolor"><view class="iconcolor2" v-for="(it, i) in resultData.colour.inColour.neiColor" :key="i" :style="{ background: it }"></view></view>
							</view>
						</view>
					</view>
					<view class="listItem">
						<view class="left">购车信息：</view>
						<view class="right">首付{{ resultData.down_Payment_Money }} {{ resultData.installment_Monthly_Money }}/期 * {{ resultData.installment }}</view>
					</view>

					<view class="listItem">
						<view class="left">电话：</view>
						<view class="right">{{ resultData.mobile }}</view>
					</view>
					<view class="listItem" v-if="resultData.status === 30 || resultData.status === 35 || resultData.status === 45">
						<view class="left">保证金：</view>
						<view class="right">
							{{ resultData.earnest_Money }}
							<text class="color-999 ml-60">实付款：</text>
							<text class="color-EB5C02">￥{{ resultData.actually_Money }}</text>
						</view>
					</view>

					<view class="bottom-flex">
						<view class="width-50 u-text-center u-border-right" @click="contactSeller">
							<i-icon icon="iconxiaoxi1" type="multiple" class="middle marr5" size="34rpx"></i-icon>
							联系买家
						</view>
						<view class="width-50 u-text-center" @click="call">
							<i-icon icon="icondianhua" type="multiple" class="middle marr5" size="34rpx"></i-icon>
							致电买家
						</view>
					</view>
				</view>
				<view class="list">
					<view class="title"><view class="shopName">提审信息</view></view>
					<view class="listItem">
						<view class="width-30 color-999">姓名：</view>
						<view class="width-70 color-333">{{ resultData.truename }}</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">身份证号：</view>
						<view class="width-70 color-333">{{ resultData.idcardno }}</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">手机号：</view>
						<view class="width-70 color-333">{{ resultData.mobile }}</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">婚姻状况：</view>
						<view class="width-70 color-333">{{ resultData.marital_status }}</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">教育水平：</view>
						<view class="width-70 color-333">{{ resultData.education_level }}</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">工作状况：</view>
						<view class="width-70 color-333">{{ resultData.work_status }}</view>
					</view>
					<view class="listItem">
						<view class="width-30 color-999">住房情况：</view>
						<view class="width-70 color-333">{{ resultData.housing_status }}</view>
					</view>
					<view class="">
						<view class="u-border-top pad-t-b-20 mt-10 color-999">身份证</view>
						<view class="flex flex-jc-sb">
							<view :class="[it ? '' : 'height160', 'idcardImg']" v-for="(it, index) in resultData.idcardimg" :key="index"><image :src="it ? it : noImg" mode=""></image></view>
						</view>
					</view>
				</view>
				<view :class="['list', resultData.status === 20 ? '' : 'nolist']">
					<view class="title" v-if="resultData.status === 20">补充资料</view>
					<view class="" v-if="resultData.isdriving_license">
						<view class="pad-t-b-10 mt-10 color-999">驾驶证</view>
						<view class="flex flex-jc-sb">
							<template v-if="resultData.driving_license.length > 0">
								<view v-for="(it, index) in resultData.driving_license" :key="index" class="idcardImg"><image :src="it" mode=""></image></view>
							</template>
							<template v-else>
								<view class="height160 idcardImg"><image :src="noImg" mode=""></image></view>
							</template>
						</view>
					</view>
					<view class="border-bottom-1" v-if="resultData.isresidence">
						<view class="pad-t-b-10 mt-10 color-999">户口本</view>
						<view class="flex flex-jc-sb">
							<template v-if="resultData.residence.length > 0">
								<view v-for="(it, index) in resultData.residence" :key="index" class="idcardImg"><image :src="it" mode=""></image></view>
							</template>
							<template v-else>
								<view class="height160 idcardImg"><image :src="noImg" mode=""></image></view>
							</template>
						</view>
					</view>
					<view class="border-bottom-1" v-if="resultData.ismarriage_license">
						<view class="pad-t-b-10 mt-10 color-999">结婚证/离婚证</view>
						<view class="flex flex-jc-sb" v-if="resultData.marriage_license.length > 0">
							<view v-for="(it, index) in resultData.marriage_license" :key="index" class="idcardImg"><image :src="it" mode=""></image></view>
						</view>
						<view class="flex flex-jc-sb" v-else>
							<view class="idcardImg height160"><image :src="noImg" mode=""></image></view>
						</view>
					</view>
					<view class="border-bottom-1" v-if="resultData.iswechat_alipay_record">
						<view class="pad-t-b-10 mt-10 color-999">支付宝/微信流水</view>
						<view class="flex flex-jc-sb" v-if="resultData.wechat_alipay_record.length > 0">
							<view v-for="(it, index) in resultData.wechat_alipay_record" :key="index" class="idcardImg"><image :src="it" mode=""></image></view>
						</view>
						<view class="flex flex-jc-sb" v-else>
							<view class="idcardImg height160"><image :src="noImg" mode=""></image></view>
						</view>
					</view>
					<view class="border-bottom-1" v-if="resultData.isaccount_statement">
						<view class="pad-t-b-10 mt-10 color-999">银行流水</view>
						<view class="flex flex-jc-sb">
							<template v-if="resultData.account_statement.length > 0">
								<view v-for="(it, index) in resultData.account_statement" :key="index" class="idcardImg"><image :src="it" mode=""></image></view>
							</template>
							<template v-else>
								<view class="idcardImg height160"><image :src="noImg" mode=""></image></view>
							</template>
						</view>
					</view>
					<view class="border-bottom-1" v-if="resultData.ishouse_purchase_contract">
						<view class="pad-t-b-10 mt-10 color-999">购房合同</view>
						<view class="flex flex-wrap-w flex-jc-sb">
							<template v-if="resultData.house_purchase_contract.length > 0">
								<view v-for="(it, index) in resultData.house_purchase_contract" :key="index" :class="[it ? '' : 'height160', 'idcardImg']"><image :src="it" mode=""></image></view>
							</template>
							<template v-else>
								<view class="idcardImg height160"><image :src="noImg" mode=""></image></view>
							</template>
						</view>
					</view>
				</view>

				<view class="list" v-if="resultData.status === 35 || resultData.status === 45">
					<view class="title">交车照片</view>
					<view class="flex">
						<view v-for="(item, index) in updataCarImgList" :key="index" class="updataCarImg" @click="enlargeImg(1, index)"><image :src="item" mode="aspectFill"></image></view>
						<view class="noImg" v-if="updataCarImgList.length < 3 && resultData.status === 35" @click="uploadImage(1)">
							<i-icon icon="iconshangchuan" type="single" class="middle marr5" size="137rpx" color="#e5e5e5"></i-icon>
						</view>
					</view>
				</view>

				<view class="list" v-if="resultData.status === 35 || resultData.status === 45">
					<view class="title block">
						<view class="">交车资料</view>
						<view class="font-24 color-EB5B01">*（可三选一上传，未上传系统将自动扣除账户保证金）</view>
					</view>

					<view class="">
						<!-- v-for="(item, index) in upCarDataList" :key="index" @click="enlargeImg(index)"-->
						<view class="flex pad-t-b-10">
							<view class="width33">
								<image class="height70" v-if="upCarDataList[0].imgUrl" :src="upCarDataList[0].imgUrl" @click="enlargeImg(2, 0)" mode="aspectFill"></image>
								<template v-else>
									<image class="" :src="piaoImg" v-if="resultData.status === 35" mode="widthFix" @click.stop="uploadImage(2, upCarDataList[0].type)"></image>
									<image v-else :src="piaoImg" mode="widthFix"></image>
								</template>
								<view class="font-24 color-999">机动车销售统一发票</view>
							</view>
							<view class="width33">
								<image class="height70" v-if="upCarDataList[1].imgUrl" :src="upCarDataList[1].imgUrl" @click="enlargeImg(2, 1)" mode="aspectFill"></image>
								<template v-else>
									<image v-if="resultData.status === 35" :src="baoImg" mode="widthFix" @click.stop="uploadImage(2, upCarDataList[1].type)"></image>
									<image v-else :src="baoImg" mode="widthFix"></image>
								</template>
								<view class="font-24 color-999">保单</view>
							</view>
							<view class="width33">
								<image class="height70" v-if="upCarDataList[2].imgUrl" :src="upCarDataList[2].imgUrl" @click="enlargeImg(2, 2)" mode="aspectFill"></image>
								<template v-else>
									<image v-if="resultData.status === 35" :src="driveImg" mode="widthFix" @click.stop="uploadImage(2, upCarDataList[2].type)"></image>
									<image v-else :src="driveImg" mode="widthFix"></image>
								</template>
								<view class="font-24 color-999">行驶证详情</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="title"><view class="shopName">订单信息</view></view>
					<view class="listItem">
						<view class="width-30 color-999">订单号：</view>
						<view class="width-60 s-line-text color-333">{{ resultData.order_no }}</view>
						<view class="width-10" @click="copy(resultData.order_no)"><text class="copy">复制</text></view>
					</view>
					<view class="listItem" v-for="(itTime, ind) in resultData.order_buy_car_record" :key="ind" v-if="itTime.name">
						<template>
							<view class="width-30 color-999">{{ itTime.name }}：</view>
							<view class="width-70 color-333">{{ itTime.addtime }}</view>
						</template>
					</view>
					<view class="listItem" v-if="resultData.status === 30">
						<view class="width-30 color-999">订单金额：</view>
						<view class="width-70 color-333">
							<text class="color-EB5C02">￥{{ resultData.actually_Money }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 浏览交车图片 -->
			<view class="popup" v-show="showImg">
				<view class="flex">
					<view class="delBtn u-text-left" @click="showImg = false"><i-icon icon="iconfanhui" type="single" class="middle marr5" size="40rpx" color="#e1e1e1"></i-icon></view>
					<view class="delBtn" @click="delCarImg(bigcarImg)" v-if="resultData.status === 35">
						删除
						<i-icon icon="iconlajitong" type="single" class="middle marr5" size="40rpx" color="#fff"></i-icon>
					</view>
				</view>

				<view class="swimg flex flex-ai-c">
					<swiper class="swiper" :duration="300" :indicator-dots="false" :autoplay="false" :current="carIndex" @change="carchangge">
						<template v-if="bigcarImg === 1">
							<swiper-item class="123" v-for="(item, index) in updataCarImgList" :key="index">
								<image class="carimg" :src="item" mode="aspectFill"></image>
								{{ index }}
							</swiper-item>
						</template>
						<template v-else>
							<swiper-item class="123" v-for="(item, index) in upCarDataList" :key="index">
								<image class="carimg" :src="item.imgUrl" mode="aspectFill"></image>
								{{ index }}
							</swiper-item>
						</template>
					</swiper>
				</view>
			</view>

			<!-- 待审核 待补充资料 -->
			<view class="fixedBottomBtn" v-if="resultData.status === 1 || resultData.status === 20">
				<view class="btnWrap btnWrap-3 flex-jc-c">
					<view class="left width-30" @click="OrderCarDispose(1)">未通过</view>
					<view class="middle-wrap width-35"><navigator :url="'/pages_order/supplementaryInfo/suppleInfo?id=' + id">需补充资料</navigator></view>
					<view class="right width-30" @click="OrderCarDispose(0)">审核通过</view>
				</view>
			</view>
			<!-- 审核未通过	待付款 已完成 -->
			<view class="fixedBottomBtn" v-else-if="resultData.status === 10 || resultData.status === 30 || resultData.status === 40 || resultData.status === 45">
				<view class="btnWrap flex-jc-c">
					<view class="left width-50" @click="contactSeller">
						<i-icon icon="iconxiaoxi" type="single" class="middle marr5" size="34rpx" color="#FFE03B"></i-icon>
						<text>联系客户</text>
					</view>
					<view class="right width-50" @click="call">
						<i-icon icon="iconlianxi" type="single" class="middle marr5" size="34rpx" color="#333"></i-icon>
						<text>致电客户</text>
					</view>
				</view>
			</view>
			<!-- 待交车 -->
			<view class="fixedBottomBtn" @click="OrderCarDeliver" v-else-if="resultData.status === 35"><view class="btn-bg-yellow width-90">确认交车</view></view>
		</view>
	</page-loading>
</template>

<script>
import { AddMobileContactData } from '@/utils/common-api.js';
export default {
	data() {
		return {
			noImg: require('../../../static/img/images/noImg.jpg'),
			resultData: {},

			statusList: [],
			imgAuthorization: '', //图片上次参数
			imgPolicy: '', //图片上次参数
			imgHost: '', //图片上次参数
			updataCarImgList: [], //上传图片数组
			upCarDataList: [{ imgUrl: '', type: 2 }, { imgUrl: '', type: 1 }, { imgUrl: '', type: 0 }], //0、行驶证 1、保单 2、发票
			showImg: false, //是否显示大图
			showImgurl: '',
			carIndex: null, //当前图片
			LowPayList: [], //低首付操作动作
			bigcarImg: null, //1--交车照片 2--交车资料
			piaoImg:
				'',
			baoImg:
				'',
			driveImg:
				''
		};
	},
	props: ['status', 'id', 'pageFrom', 'type'],
	created() {
		this.getLowPayTxt();
		this.getLowPaystatus();
		this.GetLowPayOrderCarDetails();
	},
	methods: {
		// 获取详情
		async GetLowPayOrderCarDetails() {
			uni.showLoading({
				title: '加载中'
			});
			const res = await this.$api.carOrder.OrderBuyCarDetails({ id: this.id });
			try {
				uni.hideLoading();

				res.data.colour = JSON.parse(res.data.colour);
				this.updataCarImgList = res.data.get_car_img ? res.data.get_car_img.split(',') : [];
				res.data.order_buy_car_record.forEach(it => {
					this.LowPayList.forEach(item => {
						if (item.val === it.operation_action) {
							it.name = item.name;
							it.addtime = it.addtime.split('T')[0] + ' ' + it.addtime.split('T')[1];
						}
					});
				});
				this.resultData = res.data;
				this.upCarDataList = res.data.imgs ? res.data.imgs : this.upCarDataList;
				console.log(res);
			} catch (err) {
				uni.hideLoading();
				console.log(err);
			}
		},
		// 获取低首付操作状态
		async getLowPayTxt() {
			try {
				const res = await this.$api.jsonData.getLowPayTxt();
				console.log(res);
				this.LowPayList = res.data.list;
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 订单处理
		async OrderCarDispose(type) {
			//type 0、通过 1、未通过 2、补充资料
			uni.showLoading({
				title: '加载中'
			});
			let data = {
				oid: this.id,
				storeid: this.$store.state.userInfoDetail.store.storeId,
				type: type
			};
			const res = await this.$api.carOrder.OrderCarDispose(data);
			try {
				uni.hideLoading();
				console.log(res);
				uni.showToast({
					title: '操作成功',
					duration: 2000,
					icon: 'success'
				});
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages_order/orderAdmin/orderAdmin'
					});
				}, 2000);
			} catch (err) {
				uni.hideLoading();
				console.log(err);
				uni.showToast({
					title: '请稍后重试',
					duration: 2000,
					icon: 'none'
				});
			}
		},
		// 低首付订单状态
		async getLowPaystatus() {
			try {
				const res = await this.$api.jsonData.getLowPaystatus();
				this.statusList = res.data;

				console.log(res.data);
			} catch (e) {
				//TODO handle the exception
			}
		},
		returnPaystatus(status) {
			let statusName = '';
			this.statusList.forEach(it => {
				if (it.val === status) {
					statusName = it.name;
				}
			});
			return statusName;
		},
		// 复制
		copy(data) {
			uni.setClipboardData({
				data: data,
				success: function() {
					// console.log('success');
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
		},

		// 拨打电话
		call() {
			AddMobileContactData(this.$store.state.userInfoDetail.store.storeId);
			uni.makePhoneCall({
				phoneNumber: this.resultData.mobile //仅为示例
			});
		},
		//联系买家
		contactSeller() {
			console.log(this.pageFrom);
			if (this.pageFrom === 'chat') {
				uni.navigateBack();
				return;
			}
			AddMobileContactData(this.$store.state.userInfoDetail.store.storeId);
			//与买家聊天

			this.$store.commit('news/createConversationActive', {
				user: this.resultData.truename, //店铺名称
				img: this.resultData.headPortrait, //店铺头像
				lastTime: '', //
				userId: this.resultData.account_Id, //店铺id
				conversationID: 'C2C' + this.resultData.account_Id
			});
			this.$store.commit('news/setCardInfo', {
				imgSrc: 'https://files.yzsheng.com/goodimg/brandimg/' + this.resultData.brand_id + '.png',
				name: this.resultData.car_type_name + ' ' + this.resultData.configuration_name,
				type: 'resaleCar',
				goPage: '0' //客户端页面跳转参数
			});
			uni.navigateTo({
				url: '/pages_news/contactSeller/contactSeller?user=' + this.resultData.truename + '&pageId=' + this.resultData.id + '&tab=' + this.type
			});
		},
		//获取图片上传配置信息
		// async getImageConfig() {
		// 	try {
		// 		const res = await this.$api.user.getImageConfig();
		// 		this.imgAuthorization = res.data.auth;
		// 		this.imgPolicy = res.data.policy;
		// 		this.imgHost = res.data.host;
		// 	} catch (e) {
		// 		//TODO handle the exception
		// 	}
		// },

		uploadImage(type, index) {
			const _this = this;
			let carImgList = [];
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function(result) {
					uni.showLoading({
						title: '图片上传中~'
					});
					//请求接口获取上传文件的参数
					_this.$api.user.getImageConfig().then(res => {
						uni.uploadFile({
							url: res.data.host,
							formData: {
								policy: res.data.policy,
								authorization: res.data.auth
							},
							filePath: result.tempFilePaths[0],
							name: 'file',
							success(ress) {
								
								var abc = res.data.domain + res.data.saveKey;
								console.log(ress,res,abc);
								if (type === 1) {
									let index = _this.updataCarImgList.length;
									_this.$set(_this.updataCarImgList, index, abc);
								} else {
									_this.upCarDataList.forEach((it, ind) => {
										if (it.type === index) {
											_this.$set(_this.upCarDataList[ind], 'imgUrl', abc);
										}
									});
								}

								console.log(_this.upCarDataList);
								uni.hideLoading();
							},
							fail(err) {
								console.log(err);
							}
						});
					});
				}
			});
		},
		// 交车
		async OrderCarDeliver() {
			let data = {
				id: this.id,
				storeid: this.$store.state.userInfoDetail.store.storeId,
				car_img: this.updataCarImgList.join(',')
			};
			let status = false;
			let uparr = [];
			this.upCarDataList.forEach((it, ind) => {
				if (it.imgUrl) {
					uparr.push(it);
					status = true;
				} else {
					// this.upCarDataList.splice(ind, 1);
				}
			});
			if (this.updataCarImgList.length > 0) {
				if (status) {
					const res = await this.$api.carOrder.OrderCarDeliver(data);
					try {
						// 	console.log(111);
						let carData = {
							orderId: this.id,
							imgs: uparr
						};
						this.$api.carOrder
							.StoreUploadInvoice(carData)
							.then(res => {
								uni.hideLoading();
								uni.showToast({
									title: '操作成功',
									duration: 2000,
									icon: 'success'
								});
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages_order/orderAdmin/orderAdmin'
									});
								}, 2000);
							})
							.catch(err => {
								uni.hideLoading();
								// console.log(err);
								uni.showToast({
									title: '请稍后重试',
									duration: 2000,
									icon: 'none'
								});
							});
					} catch (err) {
						uni.hideLoading();
						uni.showToast({
							title: '请稍后重试',
							duration: 2000,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '至少上传一张交车资料',
						duration: 2000,
						icon: 'none'
					});
				}
			} else {
				uni.showToast({
					title: '至少上传一张交车图片',
					duration: 2000,
					icon: 'none'
				});
			}
		},

		carchangge(e) {
			this.carIndex = e.detail.current;
		},
		// 点击交车图片
		enlargeImg(type, index) {
			this.showImg = true;
			if (type === 1) {
				this.showImgurl = this.updataCarImgList[index];
			} else {
				this.showImgurl = this.upCarDataList[index].imgUrl;
			}
			this.bigcarImg = type;
			this.carIndex = index;
			console.log(type, index);
		},
		// 删除照片
		delCarImg(type) {
			// console.log(this.carIndex)
			if (type === 1) {
				this.updataCarImgList.splice(this.carIndex, 1);
			} else {
				this.$set(this.upCarDataList[this.carIndex], 'imgUrl', '');
				// this.upCarDataList.splice(this.carIndex, 1);
			}
			this.showImg = false;
		}
	}
};
</script>

<style scoped lang="scss">
@import '../retailOrder.scss';
.swiper {
	width: 750rpx;
	height: 500rpx;
	margin-top: 35%;
	.carimg {
		width: 100%;
		height: 100%;
	}
}
.height70 {
	height: 140rpx !important;
}
</style>
